<template>
	<view class="login">
		<view class="bg"></view>
		<view class="person-tab">
			<view class="left" @click="pageBack">
				<u-icon name="arrow-left"></u-icon>
			</view>
			<view class="title">
				登录
			</view>
			<view class="right">
		
			</view>
		</view>
		<view class="login-box">
			<view class="login-title">
				<image src="../../static/login.svg" mode=""></image>
			</view>
			<view class="account">
				<view class="">
					<image src="../../static/account.png" mode=""></image>
				</view>
				<input type="text" v-model.trim="account" placeholder="请输入账号">
			</view>
			<view class="password">
				<view class="">
					<image src="../../static/password.png" mode=""></image>
				</view>
				<input maxlength="16" type="password" v-model.trim="password" placeholder="请输入密码">
			</view>
			<view class="skip" @click="switchRegistr">
				未有账号?去注册
			</view>
			<!-- <view  v-if="islogin==false" class="but">登录</view> -->
			<view class="but act" @click="mylogin">登录</view>
		</view>
		
	</view>
</template>

<script>
	import tools from "../../static/js/tool.js"
	import {getDecode} from '@/utils/bianma.js'
	export default {
		data() {
			return {
				account:"",
				password:"",
				// islogin:false
			}
		},
		// watch:{
		// 	account(val,oldval){
		// 		if(val.length!=0){
		// 			if(this.password.length!=0){
		// 				this.islogin=true
		// 			}else{
		// 				this.islogin=false
		// 			}
		// 		}else{
		// 			this.islogin=false
		// 		}
		// 	},
		// 	password(val,oldval){
		// 		if(val.length!=0){
		// 			if(this.account.length!=0){
		// 				this.islogin=true
		// 			}else{
		// 				this.islogin=false
		// 			}
		// 		}else{
		// 			this.islogin=false
		// 		}
		// 	}
		// },
		methods: {
			pageBack(){
				uni.switchTab({
					url:"../mypage/mypage"
				});
			},
			switchRegistr(){
				uni.redirectTo({
					url:`../register/register`
				})
			},
			mylogin(){
				
				if(this.account.length!=0 && this.password.length!=0){
					let account=this.account
					let password=this.password
					uniCloud.callFunction({
						name:"user_login",
						data:{
							account,
							password:tools.setAES(password)
						},
						success:res=>{
							if(res.result.data.length>0){
							let id=res.result.data[0].user_id
							uni.showToast({
								title:"登录成功",
								icon:'success'
							})
							console.log(res.result.data[0].user_id);
							if(res.result.data.length>0){

								uni.setStorageSync("key",id)
								uni.switchTab({
									url:"../mypage/mypage"
								})
							}
						}else{
							uni.showToast({
								title:"账号或密码错误",
								icon:"error"
							})
							this.account="",
							this.password=""
						}
						}
					})
				}else{
					uni.showToast({
						title:"内容不能为空",
						icon:"none"
					})
				}
				
				
			},
			
		}
	}
</script>

<style lang="scss">
	.login-title{
		display: flex;
		box-sizing: border-box;
		position: fixed;
		top: 50px;
		padding-left: 50%;
		transform: translateX(-31%);
		image{
			    width: 243px;
			    height: 187px;
		}
	}
	.bg {
		// background-image: url("../../static/loginbg.png");
		background-repeat: no-repeat;
		background-size: cover;
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: -1;
	
	}
	
	.bg::before {
		content: "";
		position: absolute;
		/* 一定要用绝对定位 */
		width: 100%;
		height: 100%;
		backdrop-filter: blur(5px);
		/* 模糊半径 */
	}
.person-tab {
		height: 80rpx;
		box-shadow: 0px 0px 3px -2px black;
		display: flex;
		color: black;
	
		.left {
			width: 76rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 40rpx;
	
		}
	
		.title {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			font-weight: bold;
		}
	
		.right {
			width: 76rpx;
		}
	}
.login{
	.login-box{
		padding: 40rpx;
	}
	// background-color: #262626;
	width: 100vw;
	height:100vh;
	box-sizing: border-box;
	
	input {
		padding-left: 10px;
	}
	.account {
		border-bottom: 1px solid #ccc;
		margin: 55% 0 10px 0;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	
		image {
			width: 22px;
			height: 22px;
		}
	}
	
	.password {
		border-bottom: 1px solid #ccc;
		margin: 10px 0;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
	
		image {
			width: 22px;
			height: 22px;
		}
	}
	
	.skip {
		display: flex;
		justify-content: flex-end;
		margin: 12px 0;
		color: #ccc;
	}
	.but{
		width: 60%;
		height: 50px;
		border-radius: 12px;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:16px;
		background-color: #ccc;
		margin: 0 auto;
		&.act{
			background-color: #ffa275;	
		}
	}
}
</style>
